<template>
	<view>
     <view class="btn" @click="show = true" style="margin-top: 40px;">
     	<text>头像</text>
     	<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
     	<text class="message">修改头像</text>
     </view>
		 
		 <view class="btn" @click="open">
		 	<text>昵称</text>
		 	<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
		 	<text class="message">以画会友</text>
		 </view>
		 
		<view class="popup">
			<u-popup v-model="show" mode="bottom" height="200px" width="100%">
				<view class="overall">
					<view class="photo">
						<text>拍照</text>
					</view>
					<view class="select">
						<text>从相册选择</text>
					</view>
				</view>
				<view class="cancel" @click="show = false">
					<text>取消</text>
				</view>
			</u-popup>
		</view>
		
		<view class="model">
			<u-modal v-model="isShow">
						<view class="slot-content">
							<u-field
									v-model="name"
									label="昵称"
									placeholder="请输入昵称"
								>
								</u-field>
						</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					name: '',
					show: false ,
					isShow: false ,
					content: `
										空山新雨后<br>
										天气晚来秋
									`
				}
			},
			methods:{
			open(){
			console.log(123)
			this.isShow = true;
				}
			}
		}
</script>

<style lang="scss" scoped>
	.btn {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 5%;
		height: 100rpx;
		background-color: #fefffe;
		border-radius: 10rpx;
		line-height: 100rpx;
		position: relative;
	}
	
	.btn .message {
		position: absolute;
		right: 70rpx;
		margin-top: -2rpx;
		margin-right: 20rpx;
		color: #939393;
	}
	
	.btn text {
		margin-left: 40rpx;
	}
	
	.btn .icon {
		margin-right: 40rpx;
	}
	
	.popup {
		background-color: #f6f6f6;
		height: 360rpx;
	}
	
  .popup .overall {
		height: 220rpx;
		margin-bottom: 20rpx;
	}
	
	.photo {
	  text-align: center;
		height: 120rpx;
		line-height: 120rpx;
	}
	
	.select {
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		border-top: 2rpx solid #f6f6f6;
	}
	
	.cancel {
		text-align: center;
		border-top: 20rpx solid #f6f6f6;
		line-height: 120rpx;
	}
	
	.slot-content {
			font-size: 56rpx;
			color: $u-content-color;
			padding-left: 30rpx;
		}
</style>
